<template>
	<div class="view">
		 <Modal 
        		v-model="data.isShow"
        		width="400px">
        		<p slot="header">
	            <span v-text="data.modalTitle"></span>
	        </p>
	        
			<Form ref="form" 
				:model="data.data" 
				:rules="ruleValidate" 
				:label-width="80">
		        <Form-item 
		        		label="名称" 
		        		prop="label" 
		        		style="width: 360px;">
		            <Input type="text" v-model="data.data.name"></Input>
		        </Form-item>
		    </Form>
		    <div slot="footer">
	           	<Button type="primary" 
	           		:loading="data.isBtnLoading" 
	           		@click="handleSubmit('form')">
	           	{{data.submitBtnTxt}}
	           	</Button>
	            <Button type="ghost" 
	            		:disabled="data.isBtnLoading" 
	            		@click="handleCancel('form')" 
	            		style="margin-left: 8px">
	            		关闭
	            </Button>
	        </div>
	     </Modal>
	</div>

</template>

<script>
	export default {
		props: ['data'],
		data() {
			return {
				ruleValidate: {
                    label: [
                        { required: true, message: '名称不能为空', trigger: 'blur' }
                    ]
                }
			}
		},
		methods: {
			handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                    		this.$emit('on-submit', this.data.data);
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                });
            },
            handleCancel (name) {
              	this.$emit('on-cancel');
              	this.data.isShow = false;
            }
		}
	}
</script>

<style scoped="scoped">
	.view {
		padding: 20px;
	}
</style>